<template>
  <tr>
    <!--            替换td中的内容为th:text后的值-->
    <td>
      <case-cell
        :cell-value="mycase.caseName"
        :caseId="mycase.id"
        caseKey="caseName"
      ></case-cell>
    </td>
    <td>
      <case-cell
        :cell-value="mycase.stepName"
        :caseId="mycase.id"
        caseKey="stepName"
      ></case-cell>
    </td>
    <td>
      <case-cell
        :cell-value="mycase.keywords"
        :caseId="mycase.id"
        caseKey="keywords"
      ></case-cell>
    </td>
    <td>
      <case-cell
        :cell-value="mycase.param1"
        :caseId="mycase.id"
        caseKey="param1"
      ></case-cell>
    </td>
    <td>
      <case-cell
        :cell-value="mycase.param2"
        :caseId="mycase.id"
        caseKey="param2"
      ></case-cell>
    </td>
    <td>
      <button id="delete" @click="handleDeleteCase">删除</button>
    </td>
  </tr>
</template>

<script setup>
import { onMounted, onUnmounted, onUpdated } from "vue";
import CaseCell from "./CaseCell.vue";
const props = defineProps(["mycase"]);
console.log("这是在caseRow中的mycase", props.mycase);
const emit = defineEmits(["deleteRow"]);
//真正触发删除的动作在这，触发的是它的父组件Table的deleteTable，然后再往上传给Main组件调用。
function handleDeleteCase() {
  emit("deleteRow", props.mycase);
}

onMounted(() => {
  console.log("新增了一条用例，触发了Mount");
});
onUnmounted(() => {
  console.log("删除了一条用例，触发了UnMount");
});
onUpdated(() => {
  console.log("caseRow更新了+++++++++++++++++++");
});
</script>

<style scoped></style>
